<template>
  <Title title="未来2周收货" style="margin-top: 8px" />
  <div class="wrapper">
    <div class="top-wrapper">
      <div class="top-tj">
        <div class="title">未来2周收货总数</div>
        <div class="value">3571</div>
      </div>
      <div class="top-tj-right">
        <Dashboard :value="statisticsData.standardParts" id="standardParts" title="标件" />
        <Dashboard
          :value="statisticsData.noStandardParts"
          id="noStandardParts"
          title="非标件"
          color="#CC7A33"
        />
      </div>
    </div>
    <div class="btm-wrapper">
      <div class="legend-rows">
        <div class="item">标准件</div>
        <div class="item">非标件</div>
        <div class="item">汇总</div>
      </div>
      <dc-chat v-if="statisticsData" :options="columnarOptions"></dc-chat>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, toRefs } from 'vue';
import Api from '@/api/index';
import Title from '../component/title.vue';
import Dashboard from './dashboard.vue';

let color1 = {
  color: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      { offset: 0.25, color: '#3382CC' },
      { offset: 1, color: 'rgba(51, 130, 204, 0.25)' },
    ],
    global: false, // 缺省为 false
  },
};

let color2 = {
  color: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      { offset: 0.25, color: '#FFC353' },
      { offset: 1, color: 'rgba(255, 195, 83, 0.25)' },
    ],
    global: false, // 缺省为 false
  },
};

const data = reactive({
  columnarOptions: {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      show: false,
    },
    grid: {
      left: '0%',
      right: '0%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      axisTick: {
        show: false,
      },
      data: ['10/01', '10/02'],
      boundaryGap: [0, 0.01],
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
          color: '#666',
        },
      },
      axisLabel: {
        color: '#EAF0FF', // Y轴标签颜色设置为洋红色
        lineStyle: {
          type: 'dashed', // 设置虚线
          color: '#666',
        },
      },
    },
    yAxis: {
      type: 'value',
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#666',
        },
      },
      axisLabel: {
        color: '#EAF0FF', // Y轴标签颜色设置为洋红色
        lineStyle: {
          type: 'dashed', // 设置虚线
          color: '#000',
        },
      },
    },
    series: [
      {
        name: '标准件',
        type: 'bar',
        itemStyle: color1,
        data: [100, 200],
      },
      {
        name: '非标件',
        type: 'bar',
        itemStyle: color2,
        data: [200, 300],
      },
      {
        name: '汇总',
        type: 'line',
        color: '#23c69f',
        data: [],
      },
    ],
  },
});

const { columnarOptions } = toRefs(data);

const statisticsData = ref({});
const getApi = async () => {
  const res = await Api.mps.assemblyboard.statistics();
  const { code, data } = res.data;
  if (code == 200) {
    statisticsData.value = {
      // 待审核总数
      pendApprovalTotal: '1000',
      // 标件
      standardParts: 75,
      // 非标件
      noStandardParts: 25,
      // 日期
      times: ['10/01', '10/02'],
      // 标准件
      standardPartsData: [12, 34],
      // 非标件
      nostandardPartsData: [123, 342],
      // 汇总
      summaryData: [200, 400],
    };
    // 日期
    columnarOptions.value.xAxis.data = statisticsData.value.times;
    // 标准件
    columnarOptions.value.series[0].data = [122, 24];
    // 非标件
    columnarOptions.value.series[1].data = [122, 324];
    // 汇总
    columnarOptions.value.series[2].data = [222, 224];
  }
};

defineExpose({
  getApi,
});
</script>

<style lang="scss" scoped>
.wrapper {
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  z-index: 99;
  height: 299px;
  display: flex;
  flex-direction: column;
  padding: 9px 13px;
  box-sizing: border-box;
  background: rgba(59, 97, 157, 0.2);
  .top-wrapper {
    width: 100%;
    display: flex;
    .top-tj {
      width: 182px;
      height: 96px;
      background-image: url('../img/group.png');
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      padding-left: 38px;
      box-sizing: border-box;
      .title {
        font-size: 14px;
        color: #eaf0ff;
      }
      .value {
        font-size: 36px;
        color: #fff;
        font-family: D-DIN, D-DIN;
      }
    }
    .top-tj-right {
      flex: 1;
      flex-direction: row;
      padding: 0px 12px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-evenly;
    }
  }
  .btm-wrapper {
    flex: 1;
    width: 100%;
    position: relative;
    .legend-rows {
      display: flex;
      align-items: center;
      position: absolute;
      left: 0px;
      right: 0px;
      top: 13%;
      margin: auto;
      justify-content: center;
      .item {
        margin: 0px 20px;
        font-size: 10px;
        color: #eaf0ff;
        position: relative;
        &::after {
          content: '';
          display: inline-block;
          position: absolute;
          width: 10px;
          height: 10px;
          top: 0px;
          right: -14px;
          bottom: 0px;
          margin: auto;
        }
      }
      .item:nth-child(1) {
        &::after {
          background: linear-gradient(180deg, #3382cc 0%, rgba(51, 130, 204, 0.25) 100%);
        }
      }
      .item:nth-child(2) {
        &::after {
          background: linear-gradient(180deg, #ffc353 0%, rgba(255, 195, 83, 0.25) 100%);
        }
      }
      .item:nth-child(3) {
        &::after {
          background: #23c69f;
        }
      }
    }
  }
}
</style>
